// 榜单样式
.bilist {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 472px;
  margin-top: 20px;
  padding-left: 1px;
  border-right: 1px solid #ccc;
  background: url(~@/assets/images/home/index_bill.png);
  .billdl1 .top {
    padding-left: 20px !important;
  }
  .billdl2 .top {
    padding-left: 22px !important;
  }
  .billdl2 .tit {
    width: 115px !important;
  }
  .billdl {
    width: 230px;
    height: 100%;
    margin-right: 1px;
    .top {
      width: 100%;
      height: 120px;
      padding: 20px 0 0 19px;
      .bill-cover {
        position: relative;
        float: left;
        // display: inline-block;
        width: 80px;
        height: 80px;
        img {
          width: 80px;
        }
        .msk {
          width: 80px;
          height: 80px;
          background-position: -145px -57px;
        }
      }
      .tit {
        float: left;
        width: 116px;
        margin: 6px 0 0 10px;
        text-align: left;
        .btn {
          margin-top: 10px;
          .btn-play,
          .btn-coll {
            display: block;
            float: left;
            height: 22px;
            width: 22px;
            margin-right: 10px;
            background: url(~@/assets/images/home/index.png) no-repeat;
          }
          .btn-play {
            background-position: -267px -205px;
          }
          .btn-coll {
            background-position: -300px -205px;
          }
        }
      }
    }
    ol {
      height: 319px;
      margin-left: 50px;
      line-height: 32px;
      li {
        position: relative;
        height: 32px;
        .no {
          float: left;
          width: 35px;
          height: 32px;
          margin-left: -35px;
          font-size: 16px;
          text-align: center;
        }
        .no-top {
          color: #c10d0c;
        }
        .song-name {
          float: left;
          width: 170px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: left;
        }
        .oper {
          display: none;
          position: absolute;
          right: 0;
          top: 7px;
          float: right;
          width: 82px;
          // margin-top: 7px;
          a {
            float: left;
            width: 17px;
            height: 17px;
            margin-right: 10px;
          }
          .play {
            background: url(~@/assets/images/home/index.png) no-repeat;
            background-position: -267px -268px;
          }
          .addList {
            background-position: 0 -700px;
            margin: 2px 6px 0 0;
          }
          .coll {
            background: url(~@/assets/images/home/index.png) no-repeat;
            background-position: -297px -268px;
          }
        }
        &:hover .oper {
          display: block;
        }
        &:hover .song-name {
          width: 95px;
        }
      }
      .more {
        text-align: right;
        padding-right: 30px;
      }
    }
  }
}
